<!-- 任务中心 -->
<template>
	<div class="box">
		<div class="title_box">
			<div class="title_box_left">
				<img src="@/assets/home/title-icon.png" alt="">
				<p>任务中心</p>
			</div>
			<div>
				<el-tabs v-model="dataList.activeName" class="demo-tabs" @tab-click="handleClick">
					<el-tab-pane label="任务列表" name="incomplete"></el-tab-pane>
					<el-tab-pane label="已完成" name="completed"></el-tab-pane>
				</el-tabs>
			</div>
		</div>
		<div class="taskCenter_box" v-if="dataList.activeName == 'incomplete'">
			<taskCenter v-if="dataList.taskList.length" :list="dataList.taskList" @getOver='getOvers'></taskCenter>
			<div class="errorIcon" v-if="!dataList.taskList.length">
				<img src="../../assets/error.png" alt="">
				<p>暂无数据</p>
			</div>
		</div>
		<div class="taskCenter_box" v-if="dataList.activeName == 'completed'">
			<taskCenter v-if="dataList.taskList.length" :list="dataList.taskList"></taskCenter>
			<div class="errorIcon" v-if="!dataList.taskList.length">
				<img src="../../assets/error.png" alt="">
				<p>暂无数据</p>
			</div>
		</div>
		<!-- <div class="paging" v-if="dataList.taskList.length">
			<el-pagination :pager-count="5" background layout="prev, pager, next" :total="dataList.total"
				:current-page="dataList.page" @current-change="changesize" />
		</div> -->
	</div>
</template>

<script setup lang="ts">
	import {searchQuestionnaire} from "../../api/home.js";
	import taskCenter from '../../components/taskCenter.vue';
	import titleBox from '../../components/titleBox.vue';
	import { reactive ,onBeforeMount} from 'vue';
	import type { TabsPaneContext } from 'element-plus'
	const dataList = reactive({
		total: 10,
		page: 1,
		activeName: 'incomplete',
		taskList:[]
	})
	const changesize = (value) => {
		dataList.page = value
	}
	const handleClick = (tab : TabsPaneContext) => {
		dataList.page = 1
		getTaskList(tab.paneName)
	}
	onBeforeMount(()=> {
		getTaskList(dataList.activeName)
	})
	const getOvers = ()=> {
		getTaskList(dataList.activeName)
		
		
		
		// getTaskList(dataList.activeName)
	}
	const getTaskList = (type)=> {
		var data = {
			params: {
			  type: type
			}
		}
		searchQuestionnaire(data).then(res=> {
			dataList.taskList = res.data
		})
	}

</script>

<style scoped lang="scss">
	.box{
		min-height: 430px;
	}
	.title_box {
		display: flex;
		align-items: center;
		justify-content: space-between;

		&_left {
			display: flex;
			align-items: center;

			img {
				width: 55px;
			}

			p {
				font-size: 34px;
				font-weight: 600;
				color: #11918E;
				margin-left: 10px;
			}
		}
	}

	.box {
		width: 1200px;
		margin: 30px auto;
		background-color: #FFFFFF;
		border-radius: 10px;
		padding: 30px;
		margin-top: 30px;

		.taskCenter_box {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			min-height: 366px;
		}
	}

	/* 分页 */
	.paging {
		width: 100%;
		margin-top: 30px;
		display: flex;
		justify-content: center;

		:deep(.is-active) {
			background-color: #11918E !important;
		}
	}

	:deep(.is-active) {
		color: #11918E!important;
	}

	:deep(.el-tabs__item):hover {
		color: #11918E;
	}

	:deep(.el-tabs__active-bar) {
		background-color: #11918E;
	}
</style>